<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
    <link rel="stylesheet" th:href="@{/admin/css/other/register.css}">
    <!-- 资 源 引 入 -->
    <script th:src="@{/component/layui/layui.js}"></script>
    <script th:src="@{/component/pear/pear.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <title>找回密码</title>
    <style>
        .layadmin-user-login-other>* {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            font-size: 14px;
        }
        .layui-tab .layui-tab-title li {
            position: relative;
            line-height: 40px;
            min-width: 65px;
            margin: 0;
            padding: 0px 43px;
            text-align: center;
            cursor: pointer;
        }
        .error{
            color: red;
            display: none;
        }
    </style>
</head>
<body th:background="@{/admin/images/background.svg}" style="background-size: cover;">
<form class="layui-form" id="emailRetrieve" lay-filter="emailRetrieve">
    <div class="layui-form-item">
        <img class="logo" th:src="@{/admin/images/logo.png}" />
        <div class="title">Wang Xue</div>
        <div class="desc">
            你 若 不 离 开，便 是 我 的 终 点。
        </div>
    </div>
    <h2>重置密码</h2>
    <p style="font-size: 12px">账户：<span id="getEmail" style="color: red;" th:text="${email}"></span></p>
    <div class="layui-form-item">
        <input placeholder="请输入新密码" type="password" id="password" name="password" lay-verify="required" hover class="layui-input"  />
        <span class="error" id="passwordError">密码必须以字母开头，长度在6~16之间<br/>只能包含字符、数字和下划线</span>
        <span class="error" id="passwordNull">密码不能为空</span>
    </div>
    <div class="layui-form-item">
        <input placeholder="请确认新密码" type="password" id="rePassword" name="rePassword" lay-verify="required" hover class="layui-input"  />
        <span class="error" id="rePasswordError">密码不一致</span>
        <span class="error" id="rePasswordNull">确认密码不能为空</span>
    </div>
    <div class="layui-form-item">
        <button type="submit" lay-filter="emailRetrieve" class="pear-btn pear-btn-success">提交</button>
    </div>
</form>

<!--获取焦点-->
<script>
    window.onload = function() {
        var inputElement = document.getElementById("password");
        inputElement.focus();
    }
</script>

<script type="text/javascript" th:inline="javascript">
    // thymeleaf 获取当前项目路径
    /*<![CDATA[*/
    const ctx = /*[[@{/}]]*/;
    /*]]>*/
    // 当前窗口 不是最外层窗口
    if (window != window.top){
        // 父窗口 window.parent，最外层窗口 window.top
        window.top.location.href = ctx;
    }
</script>

<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;

        var script = document.createElement('script');
        script.src = "/js/jsencrypt.min.js";

        var respPublicKey;
        $(document).ready(function() {
            document.body.appendChild(script);
            $.ajax({
                url: '/public-key', // 发起GET请求到/public-key端点
                type: 'GET',
                success: function (publicKey) {
                    // 在请求成功时，publicKey参数将包含后端返回的公钥字符串
                    console.log('Received public key:', publicKey);
                    respPublicKey = publicKey; // 将公钥存储在全局变量中
                },
                error: function () {
                    // 在请求失败时的处理逻辑
                    console.error('Failed to retrieve public key');
                }
            });
            $('#emailRetrieve').on('submit', function (event) {
                event.preventDefault();// 阻止表单默认提交事件
                var email= document.getElementById("getEmail").innerText;
                var password = $('#password').val();// 密码
                var rePassword = $('#rePassword').val();// 确认密码

                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(respPublicKey);
                var encryptPassword = encrypt.encrypt(password);
                var encryptRePassword = encrypt.encrypt(rePassword);

                $.ajax({
                    url: '/emailRetrieve',
                    type: 'POST',
                    data: {
                        email: email,
                        password: encryptPassword,
                        rePassword: encryptRePassword
                    },
                    success: function (response) {
                        // 提交成功的处理逻辑
                        // 处理后端返回的结果
                        console.log(response);
                        if (response.code === 200) {
                            window.location.href = ctx + response.data;
                        } else {
                            if (response.code === 500) {
                                console.log(response.msg);
                                alert(response.msg);
                            } else {
                                document.getElementById('rePasswordError').style.display = "block";
                            }
                        }
                    }, error: function (error) {
                        console.log(error);
                        window.location.href = ctx + "util/500";
                    }
                });
                return false;
            });
        });

        // 监听密码输入框的失去焦点事件
        $('#password').on('input', function () {
            var password = $(this).val();
            var passwordReg = /^[a-zA-Z]\w{5,15}$/; // 密码正则表达式,以字母开头，长度在6~16之间，只能包含字符、数字和下划线
            // 验证密码格式是否正确
            if (passwordReg.test(password)) {
                $('#passwordError').hide(); // 隐藏错误提示
                $('#passwordNull').hide();// 隐藏空提示
            } else {
                $('#passwordError').show(); // 显示错误提示
                $('#passwordNull').hide();
            }
        })
        document.getElementById('password').addEventListener('blur', function () {
            var passwordNull = document.getElementById('passwordNull');
            var passwordError = document.getElementById('passwordError');
            if (this.value == null || this.value == "") {
                passwordNull.style.display = 'inline';
                passwordError.style.display = 'none';
            } else {
                passwordNull.style.display = 'none';
            }
        });

        //监听确定密码输入框的失去焦点事件
        $('#rePassword').on('input', function () {
            var rePassword = $(this).val();
            var password = document.getElementById('password').value;
            if (rePassword !== password) {
                $('#rePasswordError').show();// 显示错误提示
                $('#rePasswordNull').hide();// 隐藏空提示
            } else {
                $('#rePasswordError').hide();// 隐藏错误提示
                $('#rePasswordNull').hide();// 隐藏空提示
            }
        });
        document.getElementById('rePassword').addEventListener('blur', function () {
            var rePasswordError = document.getElementById('rePasswordError');
            var rePasswordNull = document.getElementById('rePasswordNull');
            if (this.value == null || this.value === "") {
                rePasswordNull.style.display = 'inline';
                rePasswordError.style.display = 'none';
            } else {
                rePasswordError.style.display = 'none';
                rePasswordNull.style.display = 'none';
            }
        });

        // 当表单提交按钮被点击时
        document.querySelector('button[lay-filter="emailRetrieve"]').addEventListener('click', function () {
            //检查其他输入框是否为空
            if ((document.getElementById('password').value || document.getElementById('rePassword').value) === "" ||
                (document.getElementById('password').value || document.getElementById('rePassword').value) === null) {
                // 如果用户名、密码、确认密码输入框为空，显示提示框
                document.getElementById('passwordNull').style.display = 'inline';
                document.getElementById('rePasswordNull').style.display = 'inline';
                return false;
            } else {
                document.getElementById('passwordNull').style.display = 'none';
                document.getElementById('rePasswordNull').style.display = 'none';
                return true;
            }
        });
    })
</script>

</body>
</html>
